<!--
 * @Author: your name
 * @Date: 2020-08-03 12:00:49
 * @LastEditTime: 2020-08-03 20:45:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cms-serverd:\NZ_2001\线下三阶段\threeJD\vue\vue-cli\vue-mall\src\views\Home.vue
-->
<template>
  <div class="home">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="item in lunbolist"
        :key="item.id"
      >
        <img
          :src="item.img"
          alt=""
        >
      </van-swipe-item>
    </van-swipe>

    <!-- 九宫格区域 -->
    <van-grid :column-num="3">
      <van-grid-item
        v-for="grid in grids"
        :key="grid.id"
        :icon="grid.src"
        :text="grid.title"
      />
    </van-grid>

  </div>
</template>

<script>

// import * as Api from '../../api'

export default {
  data: () => ({
    lunbolist: [],
    grids: []
  }),
  created() {
    this.getLunbo()
    this.getGrids()
  },
  methods: {
    async getLunbo() {
      try {
        const { data: { message } } = await this.Api.getLunbo()
        console.log(message)

        this.lunbolist = message
      } catch (error) {
        this.$Toast('轮播图请求失败....')
      }
    },
    async getGrids() {
      try {
        const { data: { message } } = await this.Api.getGrids()
        // if (status !== 0) return console.log(message)
        console.log(message)
        this.grids = message
      } catch (error) {
        this.$Toast('九宫格请求失败....')
      }
    }
  }
}
</script>
<style lang="less">
.home{
  .my-swipe{
    height: 200px;
    // background-color:aqua;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height: 200px;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
